<template>
  <div class="dj-radio">
    <home-nav :title="'我订阅的电台(' + djSub.count + ')'" :more="false" />
    <ul>
      <li v-for="item in djSub.djRadios" :key="item.id" class="pt-2 pb-2 border-b-1 flex dj-radio-item">
        <div class="w-20 h-20 pr-2">
          <img style="width: 100%;height: 100%" :src="item.picUrl" alt="">
        </div>
        <div class="flex items-center flex-1 justify-between relative">
          <div>
            <p class="yu-textColor-hover" @click="jumpDjDetail(item.id)">{{ item.name }}</p>
            <p class="yu-titleColor text-xs">
              <span class="pr-2">by</span>
              <span class="yu-textColor-hover" @click="jumpHomePage(item.dj.userId)">{{ item.dj.nickname }}</span>
            </p>
          </div>
          <div class="absolute right-20 hidden actions">
            <i class="inline-block text-xl i-mdi-delete pr-2 yu-textColor-hover" @click="unsubscribe(item.id)"></i>
            <i class="inline-block text-xl i-mdi-share yu-textColor-hover" @click="sharePopupFn(item.id, item.name, item.dj.nickname)"></i>
          </div>
          <span class="yu-titleColor text-xs">
            {{ item.programCount }}期
          </span>
        </div>
      </li>
    </ul>
    <share-popup ref="sharepopupExamples" :sharePlayerInfo="sharePlayerInfo"/>
  </div>
</template>

<script setup>
import HomeNav from '@/components/HomeNav/index.vue'
import {getDjSublist} from "@/api/radio/index";
import {reactive, ref, toRef, toRefs} from "vue";
import {useStore} from "@/store/index";
import {useRouter} from "vue-router";

const store = useStore()
const router = useRouter()

const sharepopupExamples = ref()
const data = reactive({
  // 分享的数据
  sharePlayerInfo: {
    publicId: '',
    type: '',
    name: '',
    shareType: 'djradio'
  }
})
const { sharePlayerInfo } = toRefs(data)
// 订阅的电台信息
const djSub = ref({})
const getDjSublistFn = () => {
  getDjSublist().then(res => {
    if (Number(res.code) === 200) djSub.value = res
    console.log(res)
  })
}
getDjSublistFn()


// 取消订阅
const unsubscribe = async (id) => {
  const code = await store.getDjSub(id, 0)
  if (code === 200) getDjSublistFn()
}

// 跳转到电台详情
const jumpDjDetail = (id) => {
  router.push({
    path: '/dj-radio',
    query: {
      id
    }
  })
}

// 跳转到主页
const jumpHomePage = (id) => {
  router.push({
    path: '/user/homepage',
    query: {
      id
    }
  })
}


// 显示分享弹窗
const sharePopupFn = (id, title, name) => {
  data.sharePlayerInfo = {
    publicId: id,
    name: title + 'by ' + name,
    type: '电台',
    shareType: 'djradio'
  }
  sharepopupExamples.value.yuPopupA()
}

</script>


<style scoped lang="scss">
.dj-radio-item {
  &:hover {
    .actions {
      display: inline-block;
    }
  }
}
</style>
